<@user.user_html title="封面调整" includeJs=false>

	
	<script type="text/javascript" src="${statics}/plugins/cropzoom/js/script.js"></script> 
    <link href="${statics}/plugins/cropzoom/css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
    <link href="${statics}/plugins/cropzoom/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
    <script type="text/javascript" src="${statics}/plugins/cropzoom/js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="${statics}/plugins/cropzoom/js/jquery-ui-1.8.2.custom.js"></script> 
    <script type="text/javascript" src="${statics}/plugins/cropzoom/js/jquery.cropzoom.js"></script> 
    

   	<div class="clear"></div>
   		<div class="orgnavsub" style="border-bottom:none;">	
   			
			<div id="crop_container"></div>
			 									<span class="button-wrapper" id="crop"> 
                                                    <span class="l"> </span> 
                                                    <span class="r"> </span> 
                                                    <a class="button" href="javascript:void(0)">保存</a> 
                                              </span> 
                                              &nbsp;
                                              <span class="button-wrapper" id="restore"> 
                                                    <span class="l"> </span> 
                                                    <span class="r"> </span> 
                                                    <a class="button" href="javascript:void(0)">还原</a> 
                                              </span>  
		</div>
		<form action="${base}/user/space/index!save" id="cutForm">
			<input type="hidden" name="bean.id" value="${(id?c)!}">
			<input type="hidden" name="bean.path" value="" id="cutPath"> 
		</form>
    </div>
    <style type="text/css"> 
        #zoom,#rot{
            width:360px;
            margin:auto;
            height:25px;
        }
    </style>
<script type="text/javascript"> 
    $(document).ready(function(){
       var cropzoom = $('#crop_container').cropzoom({
            width:800,
            height:600,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:5,
            rotationSteps:1,
            selector:{        
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow',
              startWithOverlay: false,
              hideOverlayOnDragAndResize: true
            },
            image:{
                source:'${zoomPath}',
                width:1024,
                height:768,
                minZoom:10,
                maxZoom:150,
                snapToContainer:false
            }
        });
        
        var url = base + "/cut!cut";
        $('#crop').click(function(){
           cropzoom.send(url,'POST',{},function(rta){
            	$("#cutPath").val(rta);
            	$("#cutForm").submit();
            });
        });
    });
</script> 
</@user.user_html>


